<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:focus</title>
<style type="text/css">@import url(../README.css);</style>
<script type="text/javascript" src="../uuQuery.js"></script>
<script type="text/javascript" src="iterator.js"></script>
</head>
<body>
<div>
<p>:focus</p>
 <ul>
  <li><a href="http://www.google.com/">google.com</a></li>
  <li><a href="http://www.google.co.jp/">google.co.jp</a></li>
  <li><a href="http://maps.google.co.jp/">google maps(jp)</a></li>
 </ul>
 <input type="text" />
 <input type="button" value="button" />
</div>
<p>要素にフォーカスを合わせると、緑の破線が表示されます。Tabキーなどでフォーカスを移動してみてください。</p>
<script>
window.onload = function() {
  var styleName = document.uniqueID ? "border" : "outline";
  var peek = function() {
    uuQuery(":not(:focus)").forEach(function(v) {
      v.style[styleName] = "0px none";
    });
    uuQuery(":focus").forEach(function(v) {
     v.style[styleName] = "1px dotted green";
    });
  };
  setInterval(peek, 100);
}
</script>
<div id="log"></div>
<pre class="eg">
&lt;div&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="http://www.google.com/"&gt;google.com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.google.co.jp/"&gt;google.co.jp&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://maps.google.co.jp/"&gt;google maps(jp)&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;input type="text" /&gt;
 &lt;input type="button" value="button" /&gt;
&lt;/div&gt;

window.onload = function() {
  var styleName = document.uniqueID ? "border" : "outline";
  var peek = function() {
    uuQuery(":not(:focus)").forEach(function(v) {
      v.style[styleName] = "0px none";
    });
    uuQuery(":focus").forEach(function(v) {
     v.style[styleName] = "1px dotted green";
    });
  };
  setInterval(peek, 100);
}
</pre>
</body>
</html>
